<template>
  <view class="statistics page-box">
    <view class="statistics-head">
      {{ $u.timeFormat(showPicker, "yyyy年mm月dd日") }}
    </view>

    <view class="statistics-card">
      <view>收入统计</view>
      <view class="price">¥ 4500</view>
      <view style="color: #999">共120笔</view>
    </view>

    <view class="statistics-content">
      <view class="statistics-content-title">收入项目分类</view>
      <view class="statistics-content-chart">
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
      </view>

      <view class="statistics-content-list">
        <u-cell-group :border="false">
          <u-cell
            title="夕阳无限好"
            :border="false"
            v-for="item of 5"
            :key="item"
          >
            <u-icon
              slot="icon"
              size="36rpx"
              name="rmb-circle-fill"
              color="#C94117"
            ></u-icon>
            <view slot="title">
              <view class="title-content">
                <view class="title-on">
                  <text>艾灸采耳</text>
                  <text style="color: #999">60%（共8笔）</text>
                </view>
                <view class="title-off">
                  <!-- #C94117 -->
                  <u-line-progress
                    :percentage="30"
                    height="14rpx"
                    activeColor="#C94117"
                    :showText="false"
                  ></u-line-progress>
                </view>
              </view>
            </view>
            <view slot="value">¥ 2000</view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>

    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="showTime"
      v-model="showPicker"
      mode="year-month"
      closeOnClickOverlay
      @confirm="confirm"
      @cancel="cancel"
      @close="close"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "技师统计",
      showPicker: Date.now(),
      showTime: false,
      chartData: {},
      opts: {
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25,
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          hiddenColor: "#CECECE",
          itemGap: 10,
        },
        title: {
          name: "收益率",
          fontSize: 15,
          color: "#666666",
          offsetX: 0,
          offsetY: 0,
        },
        subtitle: {
          name: "70%",
          fontSize: 25,
          color: "#7cb5ec",
          offsetX: 0,
          offsetY: 0,
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            centerColor: "#FFFFFF",
            customRadius: 0,
            linearType: "none",
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666",
          },
        },
      },
    };
  },
  methods: {
    confirm() {
      console.log("点击了确定");
    },
    cancel() {
      this.showTime = false;
    },
    close() {
      this.showTime = false;
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [
                { name: "一班", value: 50 },
                { name: "二班", value: 30 },
                { name: "三班", value: 20 },
                { name: "四班", value: 18 },
                { name: "五班", value: 8 },
              ],
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
  onReady() {
    this.getServerData();
  },
  onLoad() {},
};
</script>

<style lang="scss" scoped>
.statistics {
  &-head {
    font-size: 30rpx;
    color: #333;
    font-weight: 800;
  }

  &-card {
    // height: 205rpx;
    box-shadow: 0rpx 6rpx 18rpx 2rpx rgba(209, 209, 209, 0.4);
    border-radius: 16rpx;
    margin: 20rpx 0;
    padding: 20rpx 40rpx;
    box-sizing: border-box;

    .price {
      font-size: 52rpx;
      color: #c94117;
      line-height: 80rpx;
    }

    & > view {
      font-size: 28rpx;
      line-height: 50rpx;
      color: #333;
    }
  }

  &-content {
    padding: 30rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 6rpx 18rpx 1rpx rgba(209, 209, 209, 0.4);
    border-radius: 15rpx;

    &-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 800;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #e5e5e5;
    }

    &-chart {
      height: 400rpx;
      width: 100%;
      margin: 20rpx 0;
    }

    &-list {
      // font-size: 28rpx;
      // color: #999;
      // margin: 20rpx 0;

      .title {
        &-content {
          margin: 0 20rpx;

          .title-off {
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>
